<template>
  <div class="ju-count-card border-box d-inline-flex border align-items-center border-primary-subtle rounded">
    <div class="ju-count-card-title border-box align-self-stretch d-flex align-items-center justify-content-center rounded bg-primary-subtle">{{ title }}</div>
    <div class="ju-count-card-value border-box px-1 text-end">
      <small>
        <count-to :duration="duration"
                  :endVal="value" />
      </small>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from "@some21/vue-class-decorator";
  import { random } from "lodash";

  @Component({
    name: "JuCountCard",
    components: {
      CountTo: () => import("vue-count-to"),
    },
  })
  export default class extends Vue {
    @Prop({ type: String, required: true })
    title: string;
    @Prop({ type: [Number, String], required: true })
    value;

    duration = random(400, 2000, false);
  }
</script>

<style lang="scss" scoped>
  .ju-count-card {
    font-size: 20px;
    padding: 2px;
    height: 2em;

    > .ju-count-card-title {
      width: 2em;
    }
    > .ju-count-card-value {
      width: 3em;
      line-height: 1em;
      > small {
        font-size: 70%;
      }
    }
  }
</style>
